<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html 
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:p="http://primefaces.org/ui"
    xmlns:ui="http://java.sun.com/jsf/facelets">

    <h:head>
        <meta charset="utf-8"></meta>
        <title>Aratuk</title>

        <link rel="stylesheet" href="site/css/inputeffect/demo.css"/>
        <link rel="stylesheet" href="site/css/inputeffect/set1.css"/>
        <link rel="stylesheet" href="site/css/style.css"/>
        <link rel="stylesheet" href="site/css/dialog/dialog.css"/>
        <link rel="stylesheet" href="site/css/dialog/dialog-sally.css"/>
        <link rel="stylesheet"  href="site/css/font-awesome/css/font-awesome.min.css"/>
        
        <link rel="stylesheet" href="site/css/bootstrap.css"/>
        <script src="site/js/bootstrap.min.js"></script>

        <script src="site/js/dialog/modernizr.custom.js"></script>

    </h:head>
    <h:body>




        <div class="button-wrap">
            <button data-dialog="somedialog" class="trigger button-green">Login</button>
        </div>

        <div id="somedialog" class="dialog">
            <div class="dialog__overlay"></div>
            <div class="dialog__content container">
                <div class="row">
                    <div class="col-md-11">
                        <img src="site/images/cash.png"/>
                        <h1>Login</h1>
                    </div>
                    <a  id="data-dialog-close" href="#" class="col-md-1">
                        <i class="fa fa-fw fa-times icon icon--hideo"></i>
                    </a>
                    <div class="col-md-12">
                        <span class="input input--hideo">
                            <input class="input__field input__field--hideo" type="text" id="input-41" placeholder="Username" />
                            <label class="input__label input__label--hideo" for="input-41">
                                <i class="fa fa-fw fa-user icon icon--hideo"></i>
                                <span class="input__label-content input__label-content--hideo">Username</span>
                            </label>
                        </span>
                    </div>
                    <div class="col-md-12">
                        <span class="input input--hideo">
                            <input class="input__field input__field--hideo" type="text" id="input-41" placeholder="Password"/>
                            <label class="input__label input__label--hideo" for="input-41">
                                <i class="fa fa-fw fa-lock icon icon--hideo"></i>
                                <span class="input__label-content input__label-content--hideo">Password</span>
                            </label>
                        </span>                    </div>
                    <div class="col-md-12">

                    </div>
                </div>
            </div>
        </div>

        <script src="site/js/dialog/classie.js"></script>
        <script src="site/js/dialog/dialogFx.js"></script>
        <script>
            (function() {

                var dlgtrigger = document.querySelector( '[data-dialog]' ),
                somedialog = document.getElementById( dlgtrigger.getAttribute( 'data-dialog' ) ),
                dlg = new DialogFx( somedialog );

                dlgtrigger.addEventListener( 'click', dlg.toggle.bind(dlg) );

            })();
        </script>
        <script>
            (function() {
                // trim polyfill : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/Trim
                if (!String.prototype.trim) {
                    (function() {
                        // Make sure we trim BOM and NBSP
                        var rtrim = /^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g;
                        String.prototype.trim = function() {
                            return this.replace(rtrim, '');
                        };
                    })();
                }

                [].slice.call( document.querySelectorAll( 'input.input__field' ) ).forEach( function( inputEl ) {
                    // in case the input is already filled..
                    if( inputEl.value.trim() !== '' ) {
                        classie.add( inputEl.parentNode, 'input--filled' );
                    }

                    // events:
                    inputEl.addEventListener( 'focus', onInputFocus );
                    inputEl.addEventListener( 'blur', onInputBlur );
                } );

                function onInputFocus( ev ) {
                    classie.add( ev.target.parentNode, 'input--filled' );
                }

                function onInputBlur( ev ) {
                    if( ev.target.value.trim() === '' ) {
                        classie.remove( ev.target.parentNode, 'input--filled' );
                    }
                }
            })();
        </script>

    </h:body>
</html>